<template>
    <div>

        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据统计</el-breadcrumb-item>
            <el-breadcrumb-item>销售统计</el-breadcrumb-item>
        </el-breadcrumb>


        <div>
            <button @click="switchData('week')">周数据</button>
            <button @click="switchData('month')">月数据</button>
            <button @click="switchData('year')">年数据</button>
        </div>
        <div id="barChart" style="height: 500px; width: 100%"></div>

        <h1>各类目数据统计：</h1>
        <el-table
                :data="tableData"
                height="600"
                border
                style="width: 100%">
            <el-table-column
                    prop="Productcategory"
                    label="商品类目" style="border: white"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="Salesquantity"
                    label="销售数量" style="border: white"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="Salesproportion"
                    label="销量占比" style="border: white"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="Monthonmonthchange"
                    label="环比变化" style="border: white"
                    align="center">
                <template slot-scope="scope">
                    <div :style="{ color: scope.row.Monthonmonthchange == '↓' ? 'red' : 'green' }">
                        {{ scope.row.Monthonmonthchange }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="salesamount"
                    label="销售金额" style="border: white"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="salesvolume"
                    label="销售额占比" style="border: white"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="Monthonmonthchangeto"
                    label="环比变化" style="border: white"
                    align="center">
                <template slot-scope="scope">
                    <div :style="{ color: scope.row.Monthonmonthchangeto ? 'red' : 'green' }">
                        {{ scope.row.Monthonmonthchangeto }}
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <el-button-group class="ppp">
            <el-button type="primary">本月</el-button>
            <el-button>本季度</el-button>
            <el-button>本年</el-button>

            <div class="block">
                <el-date-picker
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>
        </el-button-group>

        <h1>商品销售统计情况：</h1>
        <div>
            <el-tag>热销爆款</el-tag>
            <el-tag type="success">大牌专区</el-tag>
            <el-tag type="info">智能手环</el-tag>
            <el-tag type="warning">智能称</el-tag>
            <el-tag type="danger">睡眠管理</el-tag>
        </div>
        <div>
            <el-tag>营养健康</el-tag>
            <el-tag type="success">护理清洁</el-tag>
            <el-tag type="info">智能手表</el-tag>
            <el-tag type="warning">血压计</el-tag>
            <el-tag type="danger">运动户外</el-tag>
        </div>


        <el-table
                :data="tableData2"
                height="600"
                border
                style="width: 100%">
            <el-table-column
                    prop="TradeName"
                    label="商品名称" style="border: white"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="PageView"
                    label="浏览量" style="border: white"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="Visitors"
                    label="浏览人数" style="border: white"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="NumberOfPayers"
                    label="付款人数" style="border: white"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="ConversionRate"
                    label="单品转化率" style="border: white"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="SalesQuantity"
                    label="销售数量" style="border: white"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="salesAmount"
                    label="销售金额" style="border: white"
                    align="center">
            </el-table-column>
        </el-table>

        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
            </el-pagination>
        </div>



    </div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        data() {
            return {
                currentPage4: 4,
                chart: null,
                currentData: 'week', // 默认显示周数据
                tableData: [{
                    Productcategory: '热牌专区',
                    Salesquantity: '3134',
                    Salesproportion: '21.43%',
                    Monthonmonthchange: '↑3.21',
                    salesamount: '¥898921.23',
                    salesvolume: '21.43%',
                    Monthonmonthchangeto: '↑3.21'

                }, {
                    Productcategory: '大牌专区',
                    Salesquantity: '2953',
                    Salesproportion: '19.26%',
                    Monthonmonthchange: '↑3.23',
                    salesamount: '¥862718.39',
                    salesvolume: '19.26%',
                    Monthonmonthchangeto: '↑3.23'
                }, {
                    Productcategory: '智能手环',
                    Salesquantity: '2789',
                    Salesproportion: '17.53%',
                    Monthonmonthchange: '↑1.23',
                    salesamount: '¥734921.30',
                    salesvolume: '17.53%',
                    Monthonmonthchangeto: '↑1.23'
                }, {
                    Productcategory: '智能秤',
                    Salesquantity: '2247',
                    Salesproportion: '11.45%',
                    Monthonmonthchange: '↑0.26',
                    salesamount: '¥682718.09',
                    salesvolume: '11.45%',
                    Monthonmonthchangeto: '↑0.26'
                }, {
                    Productcategory: '睡眠管理',
                    Salesquantity: '2247',
                    Salesproportion: '11.45%',
                    Monthonmonthchange: '↓3.23',
                    salesamount: '¥682718.09',
                    salesvolume: '11.45%',
                    Monthonmonthchangeto: '↑3.23'
                }, {
                    Productcategory: '营养健康',
                    Salesquantity: '1357',
                    Salesproportion: '6.21%',
                    Monthonmonthchange: '↓2.08',
                    salesamount: '¥457921.28',
                    salesvolume: '6.21%',
                    Monthonmonthchangeto: '↓2.08'
                }, {
                    Productcategory: '护理清洁',
                    Salesquantity: '1407',
                    Salesproportion: '6.38%',
                    Monthonmonthchange: '↑1.25',
                    salesamount: '¥492765.08',
                    salesvolume: '6.38%',
                    Monthonmonthchangeto: '↑1.25'
                },{
                    Productcategory: '智能手表',
                    Salesquantity: '1499',
                    Salesproportion: '7.54%',
                    Monthonmonthchange: '↓0.17',
                    salesamount: '¥512921.62',
                    salesvolume: '7.54%',
                    Monthonmonthchangeto: '↓0.17'
                },{
                    Productcategory: '血压计',
                    Salesquantity: '1678',
                    Salesproportion: '9.32%',
                    Monthonmonthchange: '↑0.56',
                    salesamount: '¥617151.39',
                    salesvolume: '9.32%',
                    Monthonmonthchangeto: '↑0.56'
                },{
                    Productcategory: '运动户外',
                    Salesquantity: '1579',
                    Salesproportion: '8.20%',
                    Monthonmonthchange: '↑1.21',
                    salesamount: '¥579101.23',
                    salesvolume: '8.20%',
                    Monthonmonthchangeto: '↑1.21'
                }],
                tableData2: [{
                    TradeName: '苹果手环',
                    PageView: 2000,
                    Visitors: 700,
                    NumberOfPayers: 60,
                    ConversionRate: '10%',
                    SalesQuantity: 120,
                    salesAmount: '¥12000.00'

                }, {
                    TradeName: '足底按摩器',
                    PageView: 5235,
                    Visitors: 435,
                    NumberOfPayers: 77,
                    ConversionRate: '150%',
                    SalesQuantity: 90,
                    salesAmount: '¥888.00'
                }, {
                    TradeName: '口罩',
                    PageView: 4234,
                    Visitors: 424,
                    NumberOfPayers: 20000,
                    ConversionRate: '10%',
                    SalesQuantity: 20000,
                    salesAmount: '¥1.00'
                }, {
                    TradeName: '视力改善器材',
                    PageView: 423,
                    Visitors: 43,
                    NumberOfPayers: 2,
                    ConversionRate: '0.5%',
                    SalesQuantity: 2,
                    salesAmount: '¥4800.00'
                }, {
                    TradeName: '护理床',
                    PageView: 4245,
                    Visitors: 343,
                    NumberOfPayers: 14,
                    ConversionRate: '10%',
                    SalesQuantity: 14,
                    salesAmount: '¥13000.00'
                }, {
                    TradeName: '减肥腰带',
                    PageView: 42345,
                    Visitors: 2445,
                    NumberOfPayers: 116,
                    ConversionRate: '30%',
                    SalesQuantity: 135,
                    salesAmount: '¥399.00'
                }, {
                    TradeName: '血压计',
                    PageView: 4234,
                    Visitors: 523,
                    NumberOfPayers: 53,
                    ConversionRate: '20%',
                    SalesQuantity: 53,
                    salesAmount: '¥200.00'
                },{
                    TradeName: '按摩浴缸',
                    PageView: 2000,
                    Visitors: 424,
                    NumberOfPayers: 7,
                    ConversionRate: '13%',
                    SalesQuantity: 7,
                    salesAmount: '¥12000.00'
                },{
                    TradeName: '助听器',
                    PageView: 42,
                    Visitors: 14,
                    NumberOfPayers: 8,
                    ConversionRate: '1%',
                    SalesQuantity: 12,
                    salesAmount: '¥300.00'
                },{
                    TradeName: '按摩椅',
                    PageView: 4234,
                    Visitors: 545,
                    NumberOfPayers: 35,
                    ConversionRate: '4%',
                    SalesQuantity: 434,
                    salesAmount: '¥2800.00'
                }]
            };
        },
        mounted() {
            this.chart = echarts.init(document.getElementById('barChart'));
            this.renderChart();
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            renderChart() {
                const data = this.getDataForCurrentData(); // 根据currentData获取相应的数据

                const option = {
                    title: {
                        text: '各类目销量',
                    },
                    // ECharts配置
                    xAxis: {
                        data: data.categories,
                    },
                    yAxis: {
                        type: 'value',
                        name: '单位（个）',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    series: [
                        {
                            name: '各科室收入',
                            type: 'bar',
                            data: data.values,
                        },
                    ],
                };

                this.chart.setOption(option);
            },
            getDataForCurrentData() {
                // 根据this.currentData获取不同的数据，这里可以是异步请求或从数据源获取
                // 示例数据
                if (this.currentData === 'week') {
                    return {
                        categories: ['热销爆款', '大牌专区', '智能手环', '睡眠管理', '营养健康', '护理清洁', '智能手表', '血压表'],
                        values: [134, 953, 823, 234, 234, 378, 390, 500, 768],
                    };
                } else if (this.currentData === 'month') {
                    return {
                        categories: ['热销爆款', '大牌专区', '智能手环', '睡眠管理', '营养健康', '护理清洁', '智能手表', '血压表'],
                        values: [1168, 1126, 1114, 1117, 175, 1225, 1174, 1110, 1237, 1186, 1600, 2000],
                    };
                } else if (this.currentData === 'year') {
                    return {
                        categories: ['热销爆款', '大牌专区', '智能手环', '睡眠管理', '营养健康', '护理清洁', '智能手表', '血压表'],
                        values: [6924, 2345, 5235, 5355, 4245, 2365, 5356, 1325, 7564, 3463, 3533, 9030],
                    };
                }
            },
            switchData(newData) {
                this.currentData = newData;
                this.renderChart();
            },
        },
    };
</script>

<style scoped>
  .ppp {
      display: inline-block;
  }
    .ppp .block {
        display: inline-block;
    }
</style>